<template>
  <div class="search-suggestion">
    <van-cell
    icon="search"
    :title="str"
    v-for="(str,index) in suggestions" :key="index"
    @click="$emit('search',str)"
    >
    <div slot="title" v-html="highlight(str)"></div>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggestions }  from '@/api/search'
import { debounce } from "lodash"
export default {
  name: 'SearchSuggestion',
  components: {},
  props: {
      searchText:{
          type:String,
          require:true
      }
  },
  data () {
    return {
        suggestions:[]
    }
  },
  computed: {},
  watch: {
      searchText:{
          handler: debounce(async function(){       
         const {data}=await  getSearchSuggestions(this.searchText)
         this.suggestions=data.data.options          
          },200),
          immediate:true
  
      }
  },
  created () {},
  mounted () {},
  methods: {
    highlight(str){
       const reg = new RegExp(this.searchText, 'gi')
        return str.replace(reg, `<span style="color: red">${this.searchText}</span>`)

    }
  }
}
</script>

<style scoped lang="less"></style>